// 假设你使用 axios 来发起请求
import axios from 'axios';

export default {
  data() {
    return {
      email: '',
      password: '',
      remember: false,
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('http://localhost:5000/api/v1/login', {
          email: this.email,
          password: this.password,
          remember: this.remember,
        });

        const { access_token } = response.data;
        localStorage.setItem('access_token', access_token); // 存储 token
        this.$router.push('/dashboard'); // 登录成功后跳转
      } catch (error) {
        console.error('Login failed', error);
        alert('Invalid credentials');
      }
    },
  },
};


<template>
    <div class="login-container">
        <div class="login-background">
            <div class="background-overlay"></div>
            <div class="travel-icons">
                <i class="icon-plane"></i>
                <i class="icon-suitcase"></i>
                <i class="icon-camera"></i>
            </div>
        </div>

        <div class="login-form-container">
            <div class="logo">
                <img src="@/assets/logo-travel.png" alt="旅游项目Logo" />
                <h1>探索世界</h1>
            </div>

            <form @submit.prevent="handleSubmit" class="login-form">
                <div class="form-group" :class="{ error: errors.email }">
                    <label for="email">电子邮箱</label>
                    <input type="email" id="email" v-model="form.email" @blur="validateField('email')"
                        placeholder="请输入您的邮箱" />
                    <span class="error-message" v-if="errors.email">{{ errors.email }}</span>
                </div>

                <div class="form-group" :class="{ error: errors.password }">
                    <label for="password">密码</label>
                    <input type="password" id="password" v-model="form.password" @blur="validateField('password')"
                        placeholder="请输入您的密码" />
                    <span class="error-message" v-if="errors.password">{{ errors.password }}</span>
                </div>

                <div class="form-options">
                    <label class="remember-me">
                        <input type="checkbox" v-model="form.rememberMe" />
                        <span>记住我</span>
                    </label>
                    <router-link to="/forgot-password" class="forgot-password">忘记密码?</router-link>
                </div>

                <button type="submit" :disabled="isLoading" class="login-button">
                    <span v-if="!isLoading">登录</span>
                    <span v-else class="loading-spinner"></span>
                </button>

                <div class="social-login">
                    <p>或使用以下方式登录</p>
                    <div class="social-icons">
                        <button type="button" class="social-button google">
                            <i class="icon-google"></i>
                        </button>
                        <button type="button" class="social-button facebook">
                            <i class="icon-facebook"></i>
                        </button>
                        <button type="button" class="social-button wechat">
                            <i class="icon-wechat"></i>
                        </button>
                    </div>
                </div>

                <div class="register-link">
                    还没有账号? <router-link to="/register">立即注册</router-link>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "@/stores/auth";  // 引入 Pinia store

const router = useRouter();
const authStore = useAuthStore();  // 获取 Pinia store

const form = ref({
    email: "",
    password: "",
    rememberMe: false,
});

const errors = ref({});
const isLoading = ref(false);

const validateField = (field) => {
    const newErrors = { ...errors.value };

    switch (field) {
        case "email":
            if (!form.value.email) {
                newErrors.email = "请输入邮箱地址";
            } else if (!/^\S+@\S+\.\S+$/.test(form.value.email)) {
                newErrors.email = "邮箱格式不正确";
            } else {
                delete newErrors.email;
            }
            break;

        case "password":
            if (!form.value.password) {
                newErrors.password = "请输入密码";
            } else if (form.value.password.length < 6) {
                newErrors.password = "密码至少需要6个字符";
            } else {
                delete newErrors.password;
            }
            break;
    }

    errors.value = newErrors;
};

const validateForm = () => {
    validateField("email");
    validateField("password");
    return Object.keys(errors.value).length === 0;
};

const handleSubmit = async () => {
    if (!validateForm()) return;

    isLoading.value = true;

    try {
        await authStore.login(form.value);  // 调用 Pinia store 中的 login 方法

        // 登录成功后跳转到首页或原请求页面
        router.push("/");  // 跳转到首页
    } catch (error) {
        // 处理登录错误
        errors.value.form = error.message || "登录失败，请重试";
    } finally {
        isLoading.value = false;
    }
};
</script>

<style scoped>
.login-container {
    display: flex;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.login-background {
    flex: 1;
    background: url("@/assets/travel-bg.jpg") no-repeat center center;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(0, 119, 182, 0.7) 0%,
            rgba(0, 180, 216, 0.7) 100%);
}

.travel-icons {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 2rem;
    color: white;
    font-size: 2rem;
}

.login-form-container {
    width: 450px;
    padding: 3rem;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo {
    text-align: center;
    margin-bottom: 2rem;
}

.logo img {
    height: 60px;
    margin-bottom: 1rem;
}

.logo h1 {
    color: #0077b6;
    font-size: 1.8rem;
    margin: 0;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    color: #333;
}

.form-group input {
    padding: 0.8rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus {
    border-color: #0077b6;
    outline: none;
}

.form-group.error input {
    border-color: #e63946;
}

.error-message {
    color: #e63946;
    font-size: 0.85rem;
    height: 1rem;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #555;
}

.forgot-password {
    font-size: 0.9rem;
    color: #0077b6;
    text-decoration: none;
}

.forgot-password:hover {
    text-decoration: underline;
}

.login-button {
    background-color: #0077b6;
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-button:hover {
    background-color: #005f92;
}

.login-button:disabled {
    background-color: #90caf9;
    cursor: not-allowed;
}

.loading-spinner {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.social-login {
    text-align: center;
    margin-top: 1rem;
}

.social-login p {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    position: relative;
}

.social-login p::before,
.social-login p::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background-color: #ddd;
}

.social-login p::before {
    left: 0;
}

.social-login p::after {
    right: 0;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-button:hover {
    transform: translateY(-2px);
}

.social-button.google {
    color: #db4437;
}

.social-button.facebook {
    color: #4267b2;
}

.social-button.wechat {
    color: #09b83e;
}

.register-link {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #555;
}

.register-link a {
    color: #0077b6;
    text-decoration: none;
    font-weight: 500;
}

.register-link a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
    }

    .login-form-container {
        width: 100%;
        padding: 2rem;
    }
}
</style>
